<html>
<head>
	<meta charset="utf-8">
	<title>uni WebAssembly demo</title>
	<style>
		.light, .light input { background-color: #fff;     color: #252525; }
		.dark,  .dark  input { background-color: #252525;  color: #fff; }
		.sepia, .sepia input { background-color: #f4ecd8;; color: #5b4636;; }

		input         { flex-grow: 1; }
		input, button { font: 16px monospace; border: 1px solid #666; }
		input:focus   { box-shadow: 0px 0px .2em #6262fd;; }
		p             { font: 14px sans-serif; margin-top: 1em; }
		div           { display: flex; }
	</style>
</head>
<body class="light">
	<pre id="output"></pre>
	<div><span>$ uni&nbsp;</span><input id="input" disabled placeholder="Loading WebAssembly binary..."></div>
	<p>uni WebAssembly demo; <a href="https://github.com/arp242/uni">homepage</a>, <a href="https://www.arp242.net/wasm-cli.html">details</a>. Type <code>help</code> for usage; the <a href="https://github.com/arp242/uni/#usage">README</a> has more examples.</a></p>

	<p>
		<button class="light">Light</button>
		<button class="dark">Dark</button>
		<button class="sepia">Sepia</button>
		· <button class="permalink">Permalink to last command</button>
		· Up/down arrows to cycle history, ^L to clear the screen.</p>

	<script src="wasm_exec.js"></script>
	<script src="term.js"></script>
	<script>
		(function() {
			if (!('WebAssembly' in window)) {
				document.body.innerText = 'Sorry, you need a browser with WebAssembly support';
				return;
			}

			set_output(window.output);

			fetch('main.wasm').then(response => response.arrayBuffer()).then(function(bin) {
				window.input.placeholder = 'Ready!';
				window.input.disabled = false;

				readline('uni', window.output, window.input, function(cmd) {
					window.input.placeholder = '';
					const go = new Go();
					go.argv = cmd;
					go.exit = (code) => {
						if (code > 0)
							output.innerText += 'Exit ' + code + '\n';
					};

					WebAssembly.instantiate(bin, go.importObject).then((result) => {
						go.run(result.instance);
					});
				});
			});
		})();
	</script>

	<script>
		if (location.hash !== '') {
			location.hash.substr(1).split(',').forEach((i) => {
				i = decodeURIComponent(i)
				if (i.indexOf('color:') === 0)
					return document.body.className = i.substr(6)
				if (i.indexOf('run:') === 0) {
					input.value = i.substr(4)

					var event = document.createEvent('KeyboardEvent')
					event.initKeyboardEvent('keydown', true, true, window, false, false, false, false, 13, 0)
					// Keep trying until everything is loaded and the event is actually handled
					var t = setInterval(function() {
						if (!input.dispatchEvent(event))  // Returns false when handled, not an error (loljs)
							clearInterval(t)
					}, 10)
				}
			})
			if (document.body.className !== '')
				location.hash = 'color:' + document.body.className
		}

		document.querySelectorAll('button').forEach((elem) => {
			elem.addEventListener('click', (e) => {
				e.preventDefault()

				if (elem.className == 'permalink') {
					var event = document.createEvent('KeyboardEvent')
					event.initKeyboardEvent('keydown', true, true, window, false, false, false, false, 38, 0)
					input.dispatchEvent(event)
					var cmd = input.value

					var event = document.createEvent('KeyboardEvent')
					event.initKeyboardEvent('keydown', true, true, window, false, false, false, false, 40, 0)
					input.dispatchEvent(event)

					if (cmd === '')
						return alert('No command yet')

					var loc = location + ''
					alert(loc + (location.hash.length > 1 ? ',' : '#') + encodeURIComponent('run:' + cmd))
					return input.focus()
				}

				document.body.className = elem.className
				location.hash = 'color:' + elem.className
				input.focus()
			})
		});
	</script>
</body>
</html>
